import React from "react";
import {
  Form,
  Button,
  Card,
  Input,
  message,
  Icon,
  Checkbox,
  Radio,
  Select,
  Switch,
  DatePicker,
  TimePicker,
  InputNumber,
  Upload
} from "antd";
import moment from "moment"; //日期控件需要的
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const TextArea = Input.TextArea;
class Registers extends React.Component {
  constructor(){
    super()
    this.state={}
  }
  //Submit的方法
  handleSubmit=()=>{
    //API封装好的方法 获取表单里的值
    let uesrInfo = this.props.form.getFieldsValue();
    console.log(JSON.stringify(uesrInfo))
  }

  //API上传
  handleChange = info => {
    if (info.file.status === "uploading") {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === "done") {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          userImg:imageUrl,
          loading: false
        })
      );
    }
  };
  //API上传 仅供模拟
  getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => callback(reader.result));
    reader.readAsDataURL(img);
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    //设置表单栅格结构
    const formItemLayout = {
      //标题
      labelCol: {
        xs: 24,
        sm: 4
      },
      //文本框
      wrapperCol: {
        xs: 24,
        sm: 8
      }
    };
    const offsetLayout ={
      wrapperCol:{
        xs:24,
        sm:{
          span:12,
          offset:4
        }
      }
    }
    return (
      <div>
        <Card title="表单注册">
          <Form layout="horizontal">
            {/* 解构属性拿过来用{...} */}
            <FormItem label="用户名" {...formItemLayout}>
              {getFieldDecorator("userName", {
                initialValue: "",
                rules: [
                  {
                    required: true, //是否必填*
                    message: "用户名不能为空"
                  }
                ]
              })(<Input placeholder="请输入用户名" />)}
            </FormItem>

            <FormItem label="密码" {...formItemLayout}>
              {getFieldDecorator("psword", {
                initialValue: "",
                rules: []
              })(<Input type="password" placeholder="请输入密码" />)}
            </FormItem>

            <FormItem label="性别" {...formItemLayout}>
              {getFieldDecorator("sex", {
                initialValue: "1",
                rules: []
              })(
                <RadioGroup>
                  <Radio value="1">男</Radio>
                  <Radio value="2">女</Radio>
                </RadioGroup>
              )}
            </FormItem>

            <FormItem label="年龄" {...formItemLayout}>
              {getFieldDecorator("age", {
                initialValue: "18",
                rules: []
              })(<InputNumber />)}
            </FormItem>

            <FormItem label="当前状态" {...formItemLayout}>
              {getFieldDecorator("state", {
                initialValue: "1",
                rules: []
              })(
                <Select>
                  <Option value="1">在职</Option>
                  <Option value="2">离职</Option>
                  <Option value="3">应届</Option>
                </Select>
              )}
            </FormItem>

            <FormItem label="爱好" {...formItemLayout}>
              {getFieldDecorator("interest", {
                initialValue: [], //注意多选这里是数组
                rules: []
              })(
                // 多选 mode="multiple"
                <Select mode="multiple">
                  <Option value="1">抽烟</Option>
                  <Option value="2">喝酒</Option>
                  <Option value="3">烫头</Option>
                </Select>
              )}
            </FormItem>

            <FormItem label="是否已婚" {...formItemLayout}>
              {getFieldDecorator("married", {
                initialValue: true,
                valuePropName: "checked", //注意
                rules: []
              })(<Switch />)}
            </FormItem>

            <FormItem label="生日" {...formItemLayout}>
              {getFieldDecorator("birthday", {
                initialValue: moment("2018-08-08"),
                rules: []
              })(
                <DatePicker
                  // showTime
                  // format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD"
                />
              )}
            </FormItem>

            <FormItem label="时间" {...formItemLayout}>
              {getFieldDecorator("time")(<TimePicker />)}
            </FormItem>

            <FormItem label="住址" {...formItemLayout}>
              {getFieldDecorator("address", {
                initialValue: ""
              })(
                <TextArea
                  autosize={{
                    minRows: 4
                  }}
                />
              )}
            </FormItem>

            <FormItem label="上传头像" {...formItemLayout}>
              {getFieldDecorator("userImg")(
                <Upload
                  listType="picture-card"
                  action="//jsonplaceholder.typicode.com/posts/" //官网地址
                  showUploadList={false} //上传列表
                  onChange={this.handleChange}
                >
                  {this.state.userImg?<img src={this.state.userImg}/>:<Icon type="plus"></Icon>}
                </Upload> 
              )}
            </FormItem>

            <FormItem {...offsetLayout}>
              {getFieldDecorator("userImg")(
                <Checkbox>我已阅读过<a href="#">协议协议协议</a></Checkbox>
              )}
            </FormItem>

            <FormItem {...offsetLayout}>
              <Button type="primary" onClick={this.handleSubmit}>注册</Button>
            </FormItem>
            
          </Form>
        </Card>
      </div>
    );
  }
}
//创建一个新表单 并把原来的组件传递进去
export default Form.create()(Registers);
